<template>
	<view class="totalIncome">
		<view class="arrival">
			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" @change="confirm" />
		</view>
		
		
		
		
		<!-- 总收入部分 -->
		<view class="income-header">
			<text class="income-label">您的总收入为</text>
			<view class="icon-son">
				<text class="income-num">{{ orderList.sumMoney }}</text>
			</view>
		</view>
		<!-- 收益列表部分 -->
		<view v-for="(item, index) in orderList.list" :key="index" class="income-item">
			<view class="income-info">
				<view class="rmb-label">
					<u-icon name="rmb-circle-fill" size="18" color="#f8c22c"></u-icon>
					<text class="income-label">{{item.remark}}</text>
				</view>
				<view class="income-time">{{item.order_no}}</view>
			</view>
			<view class="income-detail">
				<text class="income-amount">{{ item.money }}</text>
				<text class="income-order">{{ item.create_at }}</text>
			</view>
		</view>
		<view class="" style="margin-top: 200rpx;">
			<u-empty  v-if="orderList.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
		</view>
		
	</view>
</template>

<script>
	export default {
	 
		data(){
			return{
				orderList: [{
					incomeTime: '2024-03-13 15:20',
					thisIncome: 380,
					orderNumber: '34567887600'
				}, {
					incomeTime: '2024-03-13 15:20',
					thisIncome: 300,
					orderNumber: '34567887600'
				},],
				InitialRange:'',//开始
				EndRange:'',//结束
			}
		},
		 onLoad() {
		 	this.asdir()	
		 },
		methods: {
			showMoreDetails() {
				// 处理点击更多明细的逻辑
			},
			confirm(e) {
					 // console.log('数组')
				var dateStr = e[0];
				var timestamp = new Date(dateStr).getTime() / 1000;
				console.log(Math.floor(timestamp));
				this.InitialRange = Math.floor(timestamp)				  
				var dateStrs = e[1];
				var timestamps = new Date(dateStrs).getTime() / 1000;
				console.log(Math.floor(timestamps));
				this.EndRange = Math.floor(timestamps)
				this.asdir()	 					  
			},
			asdir(){
				this.$api.income({
								startTime:this.InitialRange,
								endTime:this.EndRange
							}).then().then(res=>{
								console.log(res,'rrrrrrrrrrr')
								this.orderList = res.data
							})
			}
		}
	};
</script>

<style  lang="scss">
	page {
		background-color: #f9f9f9;
	}
	.totalIncome {
		width: 90%;
		margin: auto;
		
	}
	.arrival{
	margin: 30rpx 20rpx;
    }
	.income-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		// flex-direction: column;
		// /* 设置主轴为垂直方向 */
		// justify-content: space-between;
		// /* 在主轴上均匀分布子元素，第一个在顶部，最后一个在底部 */
		width: 90%;
		margin: 40rpx auto;
		background-color: #fee1c4;
		border-radius: 30rpx;
		padding: 30rpx;
		// height: 240rpx;
		.icon-son {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// margin-top: 15px;
		}
	}

	/* #ifdef H5 */
	.totalIncome {
		width: 90%;
		margin: auto;
	}
	.income-header {
		width: 90%;
		margin: 0rpx;
	}
	.income-item {
		width: 100%;
	}
	/* #endif */
	.icon-son {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-top: 15px;
	}

	.income-num {
		font-size: 24px;
		color: #87482c;
	}

	.income-label {
		font-size: 16px;
		font-weight: bold;
		color: #87482c;
	}

	.income-item {
		display: flex;
		flex-direction: column;
		background-color: white;
		width: 90%;
		border-radius: 30rpx;
		margin: 30rpx 0;
		padding: 30rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		/* 设置主轴为垂直方向 */
		justify-content: space-between;
		/* 在主轴上均匀分布子元素，第一个在顶部，最后一个在底部 */
	}

	.income-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.income-time {
		margin-left: auto;
		color: #c5c5c5;
		font-size: 24rpx;
	}

	.income-detail {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 5px;
	}

	.income-amount {
		color: red;
		font-weight: bold;
	}

	.income-order {
		margin-left: auto;
		color: #c5c5c5;
		font-size: 24rpx;
	}

	/* 按钮样式 */
	button {
		background-color: #ffeed9;
		width: 220rpx;
		font-size: 18rpx;
		color: #e3b08b;
		border: 1px #e3b08b solid;
		font-weight: 550;
	}
	
	.income-item {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		width: 90%;
		border-radius: 30rpx;
		margin: 30rpx 0;
		padding: 30rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
	
		.income-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.rmb-label {
				display: flex;
				align-items: center;
	
				.income-label {
					margin-left: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #262626;
					line-height: 40rpx;
					text-align: left;
				}
			}
	
			.income-time {
				font-weight: 400;
				font-size: 22rpx;
				color: #787878;
				line-height: 30rpx;
				text-align: right;
			}
		}
	
		.income-detail {
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.income-amount {
				font-size: 48rpx;
				color: #C9170A;
				line-height: 56rpx;
				text-align: left;
			}
	
			.income-order {
				font-size: 22rpx;
				color: #787878;
				line-height: 30rpx;
				text-align: right;
			}
		}
	
	}
</style>